<template>
  <div>
    <div class="div">this is Home</div>
    <wc-link path="/detail" label="go detail"></wc-link>
    <wc-link path="/about" label="go about"></wc-link>
    <wc-route-view></wc-route-view>
  </div>
</template>

<script>
import {WebComponents, Link, RouteView} from '../../../src/index.js'
export default class MyHome extends WebComponents {
  constructor() {
    super()
  }
  /*
  connectedCallback: 当自定义元素第一次被连接到文档DOM时被调用。
  disconnectedCallback: 当自定义元素与文档DOM断开连接时被调用。
  adoptedCallback: 当自定义元素被移动到新文档时被调用。
  attributeChangedCallback: 当自定义元素的一个属性被增加、移除或更改时被调用。
  */
  connectedCallback() {
    console.log('connectedCallback')
  }
  disconnectedCallback() {
    console.log('disconnectedCallback')
  }
  adoptedCallback() {
    console.log('adoptedCallback')
  }
  attributeChangedCallback() {
    console.log('attributeChangedCallback')
  }
}
</script>

<style>
  .div {
    background: #00f;
    border: 1px solid #0f0;
  }
</style>